<!--
* @author: lzm
* @date: 2023年12月8日 15:04:10
* @description：提示弹窗
* @update: 2023年12月8日 15:04:16
-->
<template>
  <div>
    <el-dialog
      :title='title'
      :visible='showPromptDialog'
      width='536px'
      center
      custom-class='my-dialog hardConfig'
      @close='close'
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      append-to-body>
      <!-- 假设有个type属性，1表示合并提示，2表示拆分提示 -->
      <div class='title' v-if='type == 1'>请确认是否将以下库位合并</div>
      <div class='title' v-else>
        请确认是否将<span class='shelf'>选中的库位</span>进行拆分
      </div>
      <div class='shelves' promptMsg>{{ promptMsg }}</div>
      <!-- 按钮 -->
      <div class='btnBox'>
        <el-button
          class='dialog-btn'
          size='mini'
          type='primary'
          @click='configBtn'>
          确认
        </el-button>
        <el-button class='dialog-btn' size='mini' plain @click='close'>
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mergeFn, splitFn } from '@/api/locatorManage'
// import {} from '@/api/'
export default {
  props: {
    showPromptDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '合并提示'
    },
    // 1-合并 2-拆分
    type: {
      type: [Number, String],
      default: 1
    },
    promptMsg: {
      type: String,
      default: ''
    },
    promptIds: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  data() {
    return {
      //   type: 1
    }
  },
  computed: {},
  methods: {
    // 关闭弹窗清空所有值
    close() {
      this.$emit('update:showPromptDialog', false)
    },
    // 点击确认按钮
    configBtn() {
      if (this.type == 1) {
        // 合并
        mergeFn(this.promptIds).then(res => {
          if (res.status === '2000') {
            this.$message({
              type: 'success',
              message: '合并成功'
            })
            this.$emit('completionOperation')
            this.close()
          }
        })
      } else {
        // 拆分
        splitFn(this.promptIds).then(res => {
          if (res.status === '2000') {
            this.$message({
              type: 'success',
              message: '拆分成功'
            })
            this.$emit('completionOperation')
            this.close()
          }
        })
      }
    }
  }
}
</script>
<style scoped lang='scss'>
::v-deep .hardConfig {
  .el-row {
    text-align: center;
  }

  .el-dialog__body {
    padding: 36px 40px;

    .el-form-item__label {
      margin-right: 5px;
      font-size: 18px;
      color: #fff;
      line-height: 48px;
      font-weight: normal;
      padding-left: 24px;
      text-align-last: justify;
    }

    .el-input--small .el-input__inner {
      height: 48px;
      line-height: 48px;
      font-size: 16px;
    }

    .el-form-item__content {
      line-height: 48px;
    }

    .el-input__suffix {
      top: 4%;
      right: 20px;

      .el-button {
        font-size: 17px;
        color: #062343;
        font-weight: 600;
      }
    }

    .dialog-btn {
      margin-top: 10px;
      font-size: 18px;
      height: 40px;
    }

    .weight-box {
      display: flex;
      justify-content: space-between;

      .weight-num {
        margin-left: 16px;
        color: #fff;
        font-size: 18px;
      }

      .operate {
        .el-button {
          font-size: 16px;
        }
      }
    }
  }
}

// 提示弹窗样式
::v-deep .prompt-dialog {
  margin-top: 30vh;

  .el-dialog__body {
    height: 200px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    padding-top: 72px;
  }
}

.title,
.shelves {
  color: #fff;
  text-align: center;
  font-size: 18px;
}

.shelf {
  color: #e2831e;
}

.shelves {
  color: #e2831e;
  margin-top: 16px;
}

.btnBox {
  margin-top: 24px;
  text-align: center;
}
</style>
